/*
 * Created: 2022-08-25 13:10:49
 * Author : 涛涛涛
 */

import React, { FC, useMemo } from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { MyCss, useClassName } from '@/utils/index';
import { ProductItemContext } from './ProductItemContext';
import { Product_Web } from '@/pages/_server/_class/Product/Product';
import Body from './Body/Body';
import Footer from './Footer/Footer';
import ProductStatus from './ProductStatus/ProductStatus';
type LocalCompProps = ICompProps & Product_Web;
export interface IProps extends LocalCompProps {}
ProductItem.defaultProps = {} as Partial<IProps>;
function ProductItem(props: IProps) {
    const { className, style, onClick, ...other } = props;
    const localClassName = useClassName('ProductItem', className);
    const localStyle = useMemo(() => {
        return {
            ...style,
            boxShadow: MyCss.cardBoxShadow,
        };
    }, [style]);
    return (
        <ProductItemContext.Provider value={other}>
            <RootView className={localClassName} style={localStyle} onClick={onClick}>
                <View className="ProductItem-inner">
                    <Body></Body>
                    <Footer></Footer>
                </View>
                <ProductStatus></ProductStatus>
            </RootView>
        </ProductItemContext.Provider>
    );
}
export default React.memo(ProductItem as FC<IProps>);
const RootView = styled(View)`
    &.ProductItem {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
        border-radius: 16px;
        /* box-shadow: 0 2px 12px 0 rgb(0, 0, 0, 0.6); */
        .ProductItem-inner {
            width: 675px;
            border-radius: 16px;
            overflow: hidden;
            background-color: #fff;
        }
        .ProductStatus {
            position: absolute;
            top: 40px;
            right: 30px;
        }
    }
`;
